<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>章节细纲生成 - AI网文小说创作助手</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
    <link href="common.css" rel="stylesheet">
</head>
<body>
    <div class="page-container">
        <!-- 导航栏 -->
        <nav class="navbar">
            <div class="container navbar-container">
                <a href="home.html" class="navbar-brand">AI网文小说创作助手</a>
                <div class="navbar-nav">
                    <a href="novel-list.html" class="nav-link">我的小说</a>
                    <a href="genre-selection.html" class="nav-link active">创作中心</a>
                    <a href="profile.html" class="nav-link">
                        <img src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=80&q=80" alt="用户头像" class="avatar">
                    </a>
                </div>
            </div>
        </nav>

        <!-- 主要内容 -->
        <main class="main-content">
            <div class="container">
                <!-- 步骤条 -->
                <div class="steps">
                    <div class="step completed">
                        <div class="step-number">1</div>
                        <div class="step-label">选择流派</div>
                    </div>
                    <div class="step completed">
                        <div class="step-number">2</div>
                        <div class="step-label">输入梗概</div>
                    </div>
                    <div class="step completed">
                        <div class="step-number">3</div>
                        <div class="step-label">故事要素</div>
                    </div>
                    <div class="step completed">
                        <div class="step-number">4</div>
                        <div class="step-label">章节大纲</div>
                    </div>
                    <div class="step active">
                        <div class="step-number">5</div>
                        <div class="step-label">章节细纲</div>
                    </div>
                    <div class="step">
                        <div class="step-number">6</div>
                        <div class="step-label">生成正文</div>
                    </div>
                </div>

                <!-- 页面标题 -->
                <div class="mb-8">
                    <h1 class="text-3xl font-bold text-center">章节细纲生成</h1>
                    <p class="text-center text-gray-600 mt-2">AI将为您生成更详细的章节细纲，帮助您更好地规划故事情节</p>
                </div>

                <!-- 步骤导航 -->
                <div class="bg-gray-50 p-4 rounded-lg mb-6">
                    <h3 class="font-bold mb-2">创作进度</h3>
                    <div class="flex flex-wrap gap-2">
                        <a href="genre-selection.html" class="text-sm px-3 py-1 bg-white border rounded hover:bg-gray-100 flex items-center">
                            <i class="fas fa-check-circle text-green-500 mr-1"></i> 流派：都市-异能流
                        </a>
                        <a href="story-outline.html" class="text-sm px-3 py-1 bg-white border rounded hover:bg-gray-100 flex items-center">
                            <i class="fas fa-check-circle text-green-500 mr-1"></i> 梗概：已完成
                        </a>
                        <a href="inspiration-generation.html" class="text-sm px-3 py-1 bg-white border rounded hover:bg-gray-100 flex items-center">
                            <i class="fas fa-check-circle text-green-500 mr-1"></i> 故事要素：已完成
                        </a>
                        <a href="chapter-outline.html" class="text-sm px-3 py-1 bg-white border rounded hover:bg-gray-100 flex items-center">
                            <i class="fas fa-check-circle text-green-500 mr-1"></i> 章节大纲：已完成
                        </a>
                        <span class="text-sm px-3 py-1 bg-blue-50 border border-blue-200 rounded flex items-center font-bold">
                            <i class="fas fa-pen text-blue-500 mr-1"></i> 当前：章节细纲
                        </span>
                        <a href="content-generation.html" class="text-sm px-3 py-1 bg-white border rounded hover:bg-gray-100 flex items-center opacity-75">
                            <i class="fas fa-circle text-gray-300 mr-1"></i> 下一步：生成正文
                        </a>
                    </div>
                    <p class="text-xs text-gray-500 mt-2">您可以随时点击切换到其他步骤，系统会自动保存您的进度</p>
                </div>

                <!-- 当前选择的流派和梗概 -->
                <div class="card mb-8">
                    <div class="card-header">
                        <h2 class="card-title">当前创作信息</h2>
                        <a href="story-outline.html" class="text-blue-600 hover:text-blue-800">
                            <i class="fas fa-edit"></i> 编辑
                        </a>
                    </div>
                    <div class="card-body">
                        <div class="flex items-center mb-4">
                            <span class="tag tag-male mr-2">男频</span>
                            <span class="font-bold">都市-异能流</span>
                        </div>
                        <div class="border-t pt-4">
                            <h3 class="font-bold mb-2">故事梗概</h3>
                            <p class="text-gray-600">
                                大学生李天阳在一次偶然的机会下获得了一个神秘的系统，可以看到他人的情感值。从此，他的生活发生了翻天覆地的变化，不仅能够轻松应对各种人际关系，还能在危机时刻洞察他人的真实想法。在都市中游刃有余的同时，他逐渐发现这个系统背后隐藏着更大的秘密...
                            </p>
                        </div>
                        <div class="border-t pt-4 mt-4">
                            <h3 class="font-bold mb-2">故事要素</h3>
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-3 text-sm">
                                <div>
                                    <p class="font-semibold text-blue-600"><i class="fas fa-book-open mr-1"></i> 情节要素</p>
                                    <p class="text-gray-600">意外获能、职场竞争、身份隐藏</p>
                                </div>
                                <div>
                                    <p class="font-semibold text-green-600"><i class="fas fa-user mr-1"></i> 角色要素</p>
                                    <p class="text-gray-600">平凡主角、神秘高手、隐世家族</p>
                                </div>
                                <div>
                                    <p class="font-semibold text-purple-600"><i class="fas fa-cogs mr-1"></i> 设定要素</p>
                                    <p class="text-gray-600">异能体系、隐秘组织、都市规则</p>
                                </div>
                                <div>
                                    <p class="font-semibold text-yellow-600"><i class="fas fa-map-marked-alt mr-1"></i> 场景要素</p>
                                    <p class="text-gray-600">高级写字楼、隐秘基地、能力对决</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 章节选择 -->
                <div class="mb-6">
                    <h2 class="text-xl font-bold mb-4">选择章节</h2>
                    <div class="flex overflow-x-auto pb-2 gap-2">
                        <button class="btn btn-primary whitespace-nowrap">第1章：意外的礼物</button>
                        <button class="btn btn-secondary whitespace-nowrap">第2章：初试能力</button>
                        <button class="btn btn-secondary whitespace-nowrap">第3章：神秘女孩</button>
                        <button class="btn btn-secondary whitespace-nowrap">第4章：隐秘组织</button>
                        <button class="btn btn-secondary whitespace-nowrap">第5章：能力升级</button>
                        <button class="btn btn-secondary whitespace-nowrap">第6章：真相浮出</button>
                        <button class="btn btn-secondary whitespace-nowrap">第7章：最终对决</button>
                        <button class="btn btn-secondary whitespace-nowrap">第8章：新的开始</button>
                    </div>
                </div>

                <!-- 章节信息 -->
                <div class="card mb-6">
                    <div class="card-header">
                        <h2 class="card-title">第1章：意外的礼物</h2>
                    </div>
                    <div class="card-body">
                        <p class="text-gray-600 mb-4">
                            大学生李天阳在一次偶然的机会下救下了一位神秘老人，获得了能够看到他人情感值的系统。
                        </p>
                    </div>
                </div>

                <!-- 章节字数设置 -->
                <div class="card mb-6">
                    <div class="card-header">
                        <h2 class="card-title">章节字数设置</h2>
                    </div>
                    <div class="card-body">
                        <div class="mb-4">
                            <label class="form-label">选择章节字数范围</label>
                            <div class="flex flex-wrap gap-3 mt-2">
                                <label class="flex items-center p-3 border rounded-lg cursor-pointer hover:bg-gray-50">
                                    <input type="radio" name="word-count" value="2000-3000" class="form-radio mr-2">
                                    <div>
                                        <span class="font-bold">短章节</span>
                                        <p class="text-sm text-gray-600">2000-3000字，适合快节奏情节</p>
                                    </div>
                                </label>
                                <label class="flex items-center p-3 border rounded-lg cursor-pointer hover:bg-gray-50">
                                    <input type="radio" name="word-count" value="3000-5000" class="form-radio mr-2" checked>
                                    <div>
                                        <span class="font-bold">标准章节</span>
                                        <p class="text-sm text-gray-600">3000-5000字，网文标准长度</p>
                                    </div>
                                </label>
                                <label class="flex items-center p-3 border rounded-lg cursor-pointer hover:bg-gray-50">
                                    <input type="radio" name="word-count" value="5000-8000" class="form-radio mr-2">
                                    <div>
                                        <span class="font-bold">长章节</span>
                                        <p class="text-sm text-gray-600">5000-8000字，适合重要情节</p>
                                    </div>
                                </label>
                            </div>
                        </div>
                        <div>
                            <label class="form-label">自定义字数范围</label>
                            <div class="flex items-center gap-2 mt-2">
                                <input type="number" id="min-word-count" class="form-control" placeholder="最小字数" min="1000" max="10000" step="500">
                                <span class="text-gray-500">至</span>
                                <input type="number" id="max-word-count" class="form-control" placeholder="最大字数" min="1000" max="10000" step="500">
                                <span class="text-gray-500">字</span>
                                <button class="btn btn-secondary" onclick="setCustomWordCount()">
                                    <i class="fas fa-check mr-1"></i> 确定
                                </button>
                            </div>
                            <p class="text-xs text-gray-500 mt-1">建议单章字数在1000-10000之间，过短或过长可能影响阅读体验</p>
                        </div>
                    </div>
                </div>

                <!-- 生成按钮 -->
                <div class="text-center mb-6">
                    <button id="generate-detailed" class="btn btn-primary btn-lg" onclick="generateDetailedOutline()">
                        <i class="fas fa-magic mr-2"></i> 生成章节细纲
                    </button>
                </div>

                <!-- 章节细纲编辑区域 -->
                <div class="card mb-8">
                    <div class="card-header">
                        <h2 class="card-title">章节细纲</h2>
                        <div class="flex gap-2">
                            <button class="btn btn-sm btn-secondary">
                                <i class="fas fa-edit"></i> 编辑
                            </button>
                            <button class="btn btn-sm btn-secondary">
                                <i class="fas fa-redo"></i> 重新生成
                            </button>
                        </div>
                    </div>
                    <div class="card-body">
                        <textarea id="detailed-outline-container" class="form-control" rows="15" placeholder="点击"生成章节细纲"按钮，AI将为您生成详细的章节细纲"></textarea>
                    </div>
                </div>

                <!-- 关键元素提示 -->
                <div class="mb-8">
                    <h2 class="text-xl font-bold mb-4">关键元素提示</h2>
                    <div class="bg-blue-50 p-4 rounded-lg">
                        <p class="text-gray-700 mb-3">根据都市-异能流的特点，建议在第一章中包含以下关键元素：</p>
                        <div class="flex flex-wrap gap-2">
                            <span class="tag tag-primary">主角介绍</span>
                            <span class="tag tag-primary">能力获得</span>
                            <span class="tag tag-primary">初次体验</span>
                            <span class="tag tag-primary">生活变化</span>
                            <span class="tag tag-primary">神秘引子</span>
                            <span class="tag tag-primary">情感描写</span>
                            <span class="tag tag-primary">场景描写</span>
                        </div>
                    </div>
                </div>

                <!-- 操作按钮 -->
                <div class="flex justify-between">
                    <a href="chapter-outline.html" class="btn btn-secondary">
                        <i class="fas fa-arrow-left mr-2"></i> 上一步
                    </a>
                    <a href="content-generation.html" class="btn btn-primary">
                        <i class="fas fa-arrow-right mr-2"></i> 下一步
                    </a>
                </div>
            </div>
        </main>

        <!-- 页脚 -->
        <footer class="bg-gray-800 text-white py-6">
            <div class="container text-center">
                <p class="text-gray-400">© 2023 AI网文小说创作助手. 保留所有权利.</p>
            </div>
        </footer>
    </div>

    <script src="common.js"></script>
    <script>
        // 获取URL参数
        function getUrlParameter(name) {
            name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');
            var regex = new RegExp('[\\?&]' + name + '=([^&#]*)');
            var results = regex.exec(location.search);
            return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' '));
        }
        
        // 设置自定义字数范围
        function setCustomWordCount() {
            const minWordCount = document.getElementById('min-word-count').value;
            const maxWordCount = document.getElementById('max-word-count').value;
            
            if (!minWordCount || !maxWordCount) {
                alert('请输入最小和最大字数');
                return;
            }
            
            if (parseInt(minWordCount) >= parseInt(maxWordCount)) {
                alert('最小字数必须小于最大字数');
                return;
            }
            
            // 取消选中预设选项
            const wordCountRadios = document.querySelectorAll('input[name="word-count"]');
            wordCountRadios.forEach(radio => {
                radio.checked = false;
            });
            
            // 创建自定义选项（如果不存在）
            let customOption = document.querySelector('#custom-word-count-option');
            if (!customOption) {
                const container = document.querySelector('.flex.flex-wrap.gap-3');
                
                const customLabel = document.createElement('label');
                customLabel.className = 'flex items-center p-3 border rounded-lg cursor-pointer hover:bg-gray-50 bg-blue-50';
                customLabel.id = 'custom-word-count-option';
                
                customLabel.innerHTML = `
                    <input type="radio" name="word-count" value="${minWordCount}-${maxWordCount}" class="form-radio mr-2" checked>
                    <div>
                        <span class="font-bold">自定义</span>
                        <p class="text-sm text-gray-600">${minWordCount}-${maxWordCount}字</p>
                    </div>
                `;
                
                container.appendChild(customLabel);
            } else {
                // 更新现有自定义选项
                const radio = customOption.querySelector('input[type="radio"]');
                radio.value = `${minWordCount}-${maxWordCount}`;
                radio.checked = true;
                
                const description = customOption.querySelector('p');
                description.textContent = `${minWordCount}-${maxWordCount}字`;
                
                customOption.classList.add('bg-blue-50');
            }
        }
        
        // 获取选中的字数范围
        function getSelectedWordCount() {
            const selectedRadio = document.querySelector('input[name="word-count"]:checked');
            if (selectedRadio) {
                return selectedRadio.value;
            }
            return '3000-5000'; // 默认值
        }
        
        // 保存章节细纲和字数设置
        function saveChapterOutline() {
            const chapterTitle = document.querySelector('.card-title').textContent;
            const outlineContent = document.getElementById('detailed-outline-container').value;
            const wordCountRange = getSelectedWordCount();
            
            // 在实际应用中，这里应该发送请求到服务器保存数据
            // 这里仅做模拟
            console.log('保存章节细纲:', {
                title: chapterTitle,
                outline: outlineContent,
                wordCountRange: wordCountRange
            });
            
            // 将字数范围添加到URL参数中，传递给正文生成页面
            const novelTitle = getUrlParameter('title');
            const chapterNumber = getUrlParameter('chapter');
            const url = `content-generation.html?title=${encodeURIComponent(novelTitle)}&chapter=${chapterNumber}&word_count=${wordCountRange}`;
            
            // 跳转到正文生成页面
            window.location.href = url;
        }
        
        // 页面加载时初始化
        document.addEventListener('DOMContentLoaded', function() {
            // 获取小说标题参数
            const novelTitle = getUrlParameter('title');
            if (novelTitle) {
                // 设置页面标题
                document.title = `${novelTitle} - 章节细纲生成`;
                
                // 设置小说标题显示
                const titleElement = document.querySelector('.text-3xl');
                if (titleElement) {
                    titleElement.textContent = `${novelTitle} - 章节细纲`;
                }
            }
            
            // 获取章节序号参数
            const chapterNumber = getUrlParameter('chapter');
            if (chapterNumber) {
                // 设置章节序号
                const chapterInput = document.getElementById('chapter-number');
                if (chapterInput) {
                    chapterInput.value = chapterNumber;
                }
            }
            
            // 修改下一步按钮的行为
            const nextButton = document.querySelector('a[href="content-generation.html"]');
            if (nextButton) {
                nextButton.href = 'javascript:void(0)';
                nextButton.onclick = saveChapterOutline;
            }
            
            // 为字数选择添加事件监听
            const wordCountRadios = document.querySelectorAll('input[name="word-count"]');
            wordCountRadios.forEach(radio => {
                radio.addEventListener('change', function() {
                    // 移除所有高亮
                    document.querySelectorAll('.flex.items-center.p-3.border').forEach(label => {
                        label.classList.remove('bg-blue-50');
                    });
                    
                    // 高亮选中项
                    if (this.checked) {
                        this.closest('label').classList.add('bg-blue-50');
                    }
                });
            });
            
            // 默认选中"标准章节"并高亮
            const standardOption = document.querySelector('input[value="3000-5000"]');
            if (standardOption) {
                standardOption.checked = true;
                standardOption.closest('label').classList.add('bg-blue-50');
            }
        });
    </script>
</body>
</html> 